<!--
  角色管理页面
-->
<template>
  <div class="role-manager">
    <table-search @searchBack="serachTableData" placeholder="请输入角色名称">
      <Button type="primary" @click="openModal('新增角色')">新增角色</Button>
    </table-search>
    <div class="table-content">
      <Table :columns="columns" height="520" :data="tableData"></Table>
    </div>
    <div class="foot-center">
      <Page :total="page.total"
            :current="page.current"
            :page-size="page.size"
            @on-change="pageChange"
            @on-page-size-change="sizeChange"
            show-sizer
            show-total/>
    </div>
    <Modal
      v-model="modal.show"
      :title="modal.title"
      scrollable
      class="modal-area"
      @on-cancel="closeModal"
      footer-hide
    >
      <div class="modal-h50">
        <Form ref="formInline" :label-width="70" v-if="modal.type==='roleAdd'" :model="roleInfo" :rules="roleInfoRule">
          <FormItem label="角色名">
            <Input v-model="roleInfo.roleName" placeholder="角色名"></Input>
          </FormItem>
          <FormItem label="角色类型">
            <Select v-model="roleInfo.roleType" placeholder="角色类型" :disabled="disabled">
              <Option value="0">通用角色</Option>
              <Option value="1">分组角色</Option>
            </Select>
          </FormItem>
          <FormItem label="备注">
            <Input type="textarea" :rows="4" v-model="roleInfo.remark" placeholder="备注"></Input>
          </FormItem>
        </Form>
      </div>
      <div class="modal-btn">
        <Button @click="closeModal">取消</Button>
        <Button type="primary" @click="saveRole">确定</Button>
      </div>
    </Modal>
  </div>


</template>

<script>
import * as API from "@/api/sys-role.js";
import tableSearch from "_c/table-components/table-search"

export default {
  name: "role-add",
  components: {tableSearch},
  props: {
    disabled: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      modal: {
        show: false,
        title: "",
        type: ""
      },
      page: {
        total: 0,
        current: 1,
        size: 10
      },
      columns: [
        {
          title: '角色名称',
          key: 'roleName'
        },
        {
          title: '角色类型',
          key: 'roleType',
          render: (h, params) => {
            return h('span', params.row.roleType === "1" ? "分组角色" : "通用角色");
          }
        },
        {
          title: '备注',
          key: 'remark'
        },
        {
          title: '操作',
          align: "center",
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.editRole(params.row)
                  }
                }
              }, '编辑'),
            ]);
          }
        },
      ],
      tableData: [],
      roleInfo: {
        roleName: "",
        roleType: "0",
        remark: "",
      },
      roleInfoRule: {}
    };
  },
  methods: {
    saveRole() {
      let params = Object.assign({}, this.roleInfo)
      API.saveRoleInfo(params).then(res => {
        if (res.code === "0") {
          this.$Message.success("保存成功！");
          this.closeModal()
          this.serachTableData()
        }
      })
    },
    //关闭弹窗
    closeModal() {
      let cleanModal = {
        show: false,
        title: "",
        type: ""
      }
      let cleanInfo = {
        roleName: "",
        roleType: "0",
        remark: "",
      }
      this.modal = Object.assign({}, cleanModal)
      this.roleInfo = Object.assign({}, cleanInfo)
    },
    pageChange(page) {
      this.page.current = page
      this.getTableData()
    },
    sizeChange(size) {
      this.page.current = 1
      this.page.size = size
      this.getTableData()
    },

    //搜索
    serachTableData(value) {
      this.searchName = value
      this.page.current = 1
      this.getTableData()
    },

    //打开弹窗
    openModal(title) {
      let obj = {
        title: title,
        type: "roleAdd",
        show: true
      }
      this.modal = Object.assign(this.modal, obj)
    },

    //获取表格数据
    getTableData() {
      API.getRoleList({
        page: {
          current: this.page.current,
          size: this.page.size
        },
        roleName: this.searchName
      }).then(res => {
        if (res.code === "0") {
          this.page.total = parseInt(res.data.total)
          this.tableData = res.data.records
        }
      })
    },

    //编辑角色
    editRole(row) {
      this.roleInfo = Object.assign(this.roleInfo, row)
      this.openModal("编辑角色")
    }
  },
  created() {
    this.getTableData()
  },
  mounted() {
    // this.init();
  }
};
</script>
<style lang="less" scoped>
.role-manager {
  width: 100%;

  .table-content {
    padding: 10px;
    text-align: center;
  }
}
</style>
